<template>
	<div class="about">
		<el-container>
			<el-header>
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
					<el-menu-item index=""><img src="../assets/home/logo.png" alt="QQ音乐"></el-menu-item>
					<el-menu-item index="1">音乐台</el-menu-item>
					<el-menu-item index="2">我的音乐</el-menu-item>
					<el-submenu index="3">
						<template slot="title">客户端</template>
						<el-menu-item index="3-1">HQ高品质 全员开启</el-menu-item>
						<el-menu-item index="3-2">独家音效 全面升级</el-menu-item>
						<el-menu-item index="3-3">轻盈视觉 动态皮肤</el-menu-item>
					</el-submenu>
					<el-menu-item index="4">开放平台</el-menu-item>
					<el-menu-item index="5">VIP</el-menu-item>
					<el-menu-item index="6">
						<el-input v-model="input" placeholder="搜索音乐 MV 歌单 用户">
							<el-button type="primary" icon="el-icon-search">搜索</el-button>
						</el-input>
					</el-menu-item>
					<el-menu-item index="7">登录</el-menu-item>
					<el-submenu index="8">
						<template slot="title">开通VIP</template>
						<el-menu-item index="8-1">开通绿钻豪华版</el-menu-item>
						<el-menu-item index="8-2">开通付费包</el-menu-item>
					</el-submenu>
					<el-submenu index="9">
						<template slot="title">充值</template>
						<el-menu-item index="9-1">购买乐币</el-menu-item>
						<el-menu-item index="9-2">充值饭票</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-header>
			<div>
				<el-main>
					<h2>歌单推荐</h2>
					<el-carousel :interval="4000" type="card" height="300px">
						  <el-carousel-item v-for="item in home" :key="item.id">
							<img :src="item.idView" class="image" />
							      </el-carousel-item>
						    </el-carousel>

				</el-main>
			</div>
			<el-footer>
				<el-row :gutter="20">
					<el-col :span="8">
						下载QQ音乐客户端
						<el-row :gutter="10">
							<el-col :span="6">
								PC版
							</el-col>
							<el-col :span="6">
								MAC版
							</el-col>
							<el-col :span="6">
								Android版
							</el-col>
							<el-col :span="6">
								iPone版
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="8">
						特色产品
						<el-row :gutter="10">
							<el-col :span="6">
								全民K歌<br>
								车载互联
							</el-col>
							<el-col :span="6">
								Super Sound
								QQ演出
							</el-col>
							<el-col :span="6">
								Qplay
							</el-col>
							<el-col :span="6">
								Fan直播伴侣
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="8">
						合作链接
						<el-row :gutter="10">
							<el-col :span="8">
								CJ ENM<br>
								最新版QQ<br>
								QQ浏览器<br>
								企鹅FM
							</el-col>
							<el-col :span="8">
								腾讯视频<br>
								腾讯社交广告<br>
								腾讯微云<br>
								智能电视网
							</el-col>
							<el-col :span="8">
								手机QQ空间<br>
								电脑管家<br>
								腾讯云<br>
								当贝市场
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-footer>
		</el-container>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				activeIndex: '1',
				activeIndex2: '1',
				input: '',
				home: [{
						id: 0,
						idView: require('../assets/home/QQ1.jpg')
					},
					{
						id: 1,
						idView: require('../assets/home/QQ2.jpg')
					},
					{
						id: 2,
						idView: require('../assets/home/QQ3.jpg')
					},
					{
						id: 3,
						idView: require('../assets/home/QQ4.jpg')
					},
					{
						id: 4,
						idView: require('../assets/home/QQ5.jpg')
					},
					{
						id: 5,
						idView: require('../assets/home/QQ6.jpg')
					},
					{
						id: 6,
						idView: require('../assets/home/QQ7.jpg')
					},
					{
						id: 7,
						idView: require('../assets/home/QQ8.jpg')
					},
					{
						id: 8,
						idView: require('../assets/home/QQ9.jpg')
					},
					{
						id: 9,
						idView: require('../assets/home/QQ10.jpg')
					}
					//imagebox是assets下一个放图片的文件夹
				],
			};
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>
<style>
	.el-header,
		{
		text-align: center;
	}

	.el-main {
		text-align: center;
		line-height: 100px;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
		width: 200px;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	.el-carousel {
		width: 900px;
		margin: auto;
	}

	.image {
		width: 100%;
		height: 100%;
	}
</style>
